<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 修改为与top.jsp相同的JSTL标签库URI -->
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="<%=request.getContextPath()%>/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约排班管理 - 医疗预约系统后台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="statics/css/hisStyle.css">
    <link rel="stylesheet" href="statics/css/common-styles.css">
</head>
<body>
<%@include file="../common/sidebar.jsp"%>
<div class="main-content">
    <%@include file="../common/top.jsp"%>
    <div class="content">
        <div class="function-page">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>预约排班管理</h1>
            </div>
            
            <!-- 操作按钮 -->
            <div class="action-bar">
                <a href="visit/toAdd" class="btn btn-primary">
                    <i class="fas fa-plus-circle"></i> 新增排班
                </a>
            </div>

            <!-- 查询表单 -->
            <div class="search-filter">
                <form id="visitFindForm" action="visit/find" method="get">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="deptId">科室：</label>
                            <select id="deptId" name="deptId" class="form-control">
                                <option value="">请选择</option>
                                <c:forEach items="${departmentList}" var="department">
                                    <option value="${department.deptId}" 
                                            <c:if test="${param.deptId eq department.deptId}">selected</c:if>>
                                            ${department.deptName}<c:if test='${not empty department.hospital and not empty department.hospital.hospitalName}'>
                                                <span style='color: #999; font-size: 12px;'>(${department.hospital.hospitalName})
                                                </span></c:if>
                                    </option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="visitDate">日期：</label>
                            <input type="date" id="visitDate" name="visitDate" value="${param.visitDate}" class="form-control"/>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> 查询
                        </button>
                    </div>
                </form>
            </div>

            <div class="data-section">
                <table class="data-table">
                    <thead>
                    <tr>
                        <th>排班ID</th>
                        <th>科室</th>
                        <th>医生姓名</th>
                        <th>排班日期</th>
                        <th>排班时段</th>
                        <th>可预约数量</th>
                        <th>已预约数量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${pageInfo.list}" var="visit">
                        <tr>
                            <td>${visit.visitId}</td>
                            <td>${visit.department.deptName}<c:if test='${not empty visit.department.hospital
                            and not empty visit.department.hospital.hospitalName}'>
                                <span style='color: #999; font-size: 12px;'>(${visit.department.hospital.hospitalName})</span></c:if></td>
                            <td>${visit.doctorName}</td>
                            <td>${visit.visitDate}</td>
                            <td>${visit.timeSlot}</td>
                            <td>${visit.availableCount}</td>
                            <td>${visit.bookedCount}</td>
                            <td>
                                <div class="operations">
                                    <button class="btn btn-secondary btn-sm" onclick="findById(${visit.visitId})">
                                        <i class="fas fa-edit"></i> 编辑
                                    </button>
                                    <button class="btn btn-danger btn-sm" onclick="removeById(${visit.visitId})">
                                        <i class="fas fa-trash-alt"></i> 删除
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
            
            <!-- 分页控件 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    总计 ${pageInfo.total} 条记录，当前第 ${pageInfo.pageNum} / ${pageInfo.pages} 页
                </div>
                <div class="pagination">
                    <a href="javascript:void(0)" onclick="goToPage(1)" class="pagination-link" ${pageInfo.pageNum == 1 ? 'disabled' : ''}>
                        <i class="fas fa-angle-double-left"></i> 首页
                    </a>
                    <a href="javascript:void(0)" onclick="goToPage(${pageInfo.pageNum-1})" class="pagination-link" ${pageInfo.pageNum == 1 ? 'disabled' : ''}>
                        <i class="fas fa-angle-left"></i> 上一页
                    </a>
                    
                    <!-- 页码遍历 -->
                    <c:forEach begin="1" end="${pageInfo.pages}" var="i">
                        <a href="javascript:void(0)" onclick="goToPage(${i})" class="pagination-link ${pageInfo.pageNum == i ? 'active' : ''}">
                            ${i}
                        </a>
                    </c:forEach>
                    
                    <a href="javascript:void(0)" onclick="goToPage(${pageInfo.pageNum+1})" class="pagination-link" ${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}>
                        下一页 <i class="fas fa-angle-right"></i>
                    </a>
                    <a href="javascript:void(0)" onclick="goToPage(${pageInfo.pages})" class="pagination-link" ${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}>
                        尾页 <i class="fas fa-angle-double-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
        // 分页跳转函数
        function goToPage(pageNum) {
            if (pageNum < 1) pageNum = 1;
            if (pageNum > ${pageInfo.pages}) pageNum = ${pageInfo.pages};

            const deptId = document.querySelector('select[name="deptId"]').value;
            const visitDate = document.querySelector('input[name="visitDate"]').value;

            let url = 'visit/find?pageNum=' + pageNum;
            if (deptId) url += '&deptId=' + encodeURIComponent(deptId);
            if (visitDate) url += '&visitDate=' + encodeURIComponent(visitDate);

            window.location.href = url;
        }

        function findById(visitId) {
            window.location.href = "visit/edit?visitId=" + visitId;
        }

        function removeById(visitId) {
            if (confirm("确定删除该排班吗？")) {
                window.location.href = "visit/removeById?visitId=" + visitId;
            }
        }
    </script>
</body>
</html>